<template>
  <!--  -->
  <cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
    <cl-pagefull>
      <template #head>
        <el-row type="flex">
          <cl-filter-group v-model="search">
            <cl-filter label="事业部">
							<cl-select v-model="search.biz_id" placeholder="请选择" filterable @change="changeBiz">
								<el-option v-for="item in business" :key="item.biz_id" :label="item.biz_name" :value="item.biz_id" />
							</cl-select>
						</cl-filter>
            <cl-filter label="门店">
              <cl-shop-select v-model="search.dept_id" clearable filterable :biz_id="search.biz_id"
                style="width: 100%" />
            </cl-filter>
            <cl-filter label="是否付款">
              <cl-select clearable v-model="search.is_paid" style="width: 100%">
                <el-option :value="1" label="已付款" />
                <el-option :value="0" label="未付款" />
              </cl-select>
            </cl-filter>
            <cl-filter label="结算日期">
              <cl-date-picker clearable v-model="search.timeList" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :clearable="false"
                style="width: 210px" />
            </cl-filter>
          </cl-filter-group>

        </el-row>
      </template>
      <el-row>
        <cl-table v-bind="tableProp">

          <template #column-is_paid="{ scope: { row } }">
            <el-tag :type="row.is_paid == 1 ? 'primary' : 'danger'"> {{ row.is_paid == 1 ? '已付款' : '未付款' }}</el-tag>
          </template>
          <template #column-images="{ scope: { row } }">
            <div style="display: flex;align-items: center; cursor: pointer;" @click="openImages(row)">
              <span v-if="row.images.length" style="margin-right: 5px;">+{{ row.images.length }}</span>
              <div>
                <template v-for="item in row.images.slice(0, 3)">
                  <el-image style="width: 50px; height: 50px ;margin-left: 5px;" :src="item"></el-image>
                </template>
              </div>
            </div>

          </template>
          <template #column-opt="{ scope: { row } }">
            <el-button type="primary" @click="openPayDialog(row)">付款</el-button>
            <el-button type="danger" @click="closedRollback(row)">撤回结算</el-button>
          </template>
        </cl-table></el-row>
      <template slot="foot">
        <el-row type="flex">
          <cl-flex1 />
          <!-- 分页控件 -->
          <cl-pagination />
        </el-row>
      </template>
    </cl-pagefull>
    <PayDialog ref="payDialogRef" @successed="refresh" />
    <ImagesListDialog ref="imagesListDialogRef" />
  </cl-crud>
</template>

<script>
import PayDialog from "./components/PayDialog.vue";
import dayjs from "dayjs";
import pageMinix from "@/mixins/page";
import ImagesListDialog from './components/imagesListDialog.vue'
export default {
  mixins: [pageMinix],
  components: {
    PayDialog, ImagesListDialog
  },
  data() {
    return {
      search: { 
        timeList: [dayjs(new Date()).format('YYYY-MM-DD'), dayjs(new Date()).format('YYYY-MM-DD')], 
        biz_id: "",
				dept_id: ""
      },
      tableProp: {
        columns: [
          {
            label: "结算单号",
            prop: "order_no",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "结算金额",
            prop: "amount",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "门店",
            prop: "dept_name",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "结算日期",
            prop: "close_time",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "是否付款",
            prop: "is_paid",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "付款凭证",
            prop: "images",
            width: 250,
            align: "left",
          },
          {
            label: "付款日期",
            prop: "pay_time",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },

          {
            label: "结算人员",
            prop: "close_user_name",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          {
            label: "付款人员",
            prop: "paid_user_name",
            minWidth: 100,
            align: "left",
            showOverflowTooltip: true
          },
          { label: "操作", prop: "opt", width: 200, fixed: "right", disable: true }
        ]
      }
    };
  },
  created() {
    this.search.biz_id = this.getCurrBiz();
    this.getBizRefShop(this.search.biz_id);
  },
  mounted() { },
  methods: {
    onLoad({ ctx, app }) {
      ctx.service(this.$service.reconciliation)
        .set("dict", {
          api: {
            page: "closedList"
          }
        })
        .done();
      app.refresh(this.search);
    },
    async onRefresh(params, { next, render }) {
      const { list } = await next(params)
      console.log(list);

      render(list);
    },
    refresh() {
      this.$refs.crud.refresh({ page: 1, ...this.search })
    },
    openPayDialog(item) {
      this.$refs.payDialogRef.open(this.$TOOL.objCopy(item))
    },
    openImages(row) {
      this.$refs.imagesListDialogRef.open(this.$TOOL.objCopy(row))
    },
    closedRollback(row) {
      this.$alert('确定撤回结算吗', '提示', {
        confirmButtonText: '确定',
        callback: async (action) => {
          console.log(action);
          if (action == 'confirm') {
            await this.$service.reconciliation.closedRollback({ id: row.id });
            this.$message.success('操作成功');
            this.refresh();
          }
        }
      });
    }
  }
};
</script>
<style scoped lang="scss"></style>
